import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal } from 'antd';
import { connect } from 'dva';

const FormItem = Form.Item;
const { TextArea } = Input;
@connect(({ invoice, loading }) => ({
  loading: loading.models.invoice,
  invoice,
}))
@Form.create()
class AttrModal extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  // 取消
  handleCancle = () => {
    const { form, onCancel } = this.props;
    onCancel();
    form.resetFields();
  };

  // 提交申请退票模态框数据
  submitModalData = () => {
    const { form, invApplyId, onOk } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const params = {
          remerk: values.remerk,
          invApplyId,
        };
        onOk(params);
      }
    });
  };

  render() {
    const {
      form: { getFieldDecorator },
      modalVisible,
      loadingFlag,
    } = this.props;
    // 模态框布局
    const formItemLayoutModal = {
      labelCol: { md: { span: 5 } },
      wrapperCol: { md: { span: 17, offset: 1 } },
    };
    // 模态框配置
    const modalConfig = {
      title: '申请退票',
      visible: modalVisible,
      onOk: this.submitModalData,
      okText: '确认',
      onCancel: this.handleCancle,
      destroyOnClose: true,
      confirmLoading: loadingFlag,
    };
    return (
      <Modal {...modalConfig}>
        <Form layout="horizontal">
          <FormItem {...formItemLayoutModal} label="退票原因">
            {getFieldDecorator('remerk', {
              rules: [{ required: modalVisible, message: '请输入' }],
            })(<TextArea rows={4} placeholder="请输入退票原因" maxLength={200} />)}
          </FormItem>
        </Form>
      </Modal>
    );
  }
}

export default AttrModal;
